<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mb-1">
            <div class="mx-auto">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <select class="custom-select" id="seM3u8"></select>
                    </div>
                    <input id="txtM3u8" class="form-control" placeholder="请粘贴 M3U8 播放源（http 协议播放源须允许）" />
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <video id="video" controls class="mw-100"></video>
        </div>
    </div>
</div>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("hls.js"))

<script>
    var vd = {
        m3u8: function () { return document.getElementById('seM3u8').value },
        video: document.getElementById('video'),

        init: function () {
            $.ajax({
                url: "/lib/m3u8/tv.txt",
                success: function (data) {
                    var ds = data.split('#EXTINF:-1'), sehtm = [];
                    $.each(ds, function () {
                        var d = this;
                        var matchm3u8 = /http(.*).m3u8/i.exec(d);
                        var namem3u8 = /,(.*)/.exec(d)

                        if (matchm3u8 && namem3u8) {
                            sehtm.push('<option value="' + matchm3u8[0] + '">' + namem3u8[1] + '</option>')
                        }
                    })

                    $('#seM3u8').html(sehtm.join(''));

                    vd.play(vd.m3u8(), 1);
                }
            })

            document.getElementById('txtM3u8').oninput = function () {
                if (this.value.toLowerCase().indexOf('.m3u8') >= 0) {
                    vd.play(this.value, 1);
                }
            }

            document.getElementById('seM3u8').onchange = function () {
                vd.play(this.value, 1);
            }

            vd.autoSize();
            window.onresize = vd.autoSize;
        },
        play(m3u8, isplay) {
            if (Hls.isSupported()) {
                var hls = new Hls();
                hls.loadSource(m3u8);
                hls.attachMedia(vd.video);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    isplay && vd.video.play();
                });
            }
            else if (vd.video.canPlayType('application/vnd.apple.mpegurl')) {
                vd.video.src = m3u8;
                vd.video.addEventListener('loadedmetadata', function () {
                    isplay && video.play();
                });
            } else {
                vd.video.parentNode.innerHTML = "您的浏览器不支持，请换Chrome浏览器、Firefox浏览器";
            }
        },
        autoSize: function () {
            var vh = document.documentElement.clientHeight - vd.video.getBoundingClientRect().top - 10;
            vd.video.style.maxHeight = vh + "px";
        }
    }

    vd.init();
</script>